<template>
    <div class="chaos-user-discuss-input">

        <div style="width:100px;height:100px;float:left;">
            <img :src="userHeadImgBase64" height="60" width="60" style="border-radius:30px;margin-left:20px;margin-top:20px;"/>
        </div>

        <div style="width:450px;height:100px;float:left;margin-top:15px;">
            <div class="el-textarea">
                <textarea @focus="isTextAreaClick=true,textAreaHover()" @blur="isTextAreaClick=false,textAreaHover()" @mouseover="textAreaHover" @mouseout="textAreaHover" v-bind:style="{'background-color':isTextAreaHover?'#ffffff':'#F4F5F7','border-color':isTextAreaHover?'#409EFF':''}" autocomplete="off" rows="3" class="el-textarea__inner" style="resize: none; min-height: 33px;"></textarea>
            </div>
            <el-divider></el-divider>
        </div>

        <div style="width:80px;height:100px;float:left;margin-top:15px;">
            <div class="pinglun-button-style" @mouseover="inputAreaHover" @mouseout="inputAreaHover" v-bind:style="{'background-color':isInputAreaHover?'#00a1d6':'#00b5e5'}">
                发表评论
            </div>
            <el-divider></el-divider>
<!--            <el-button style="height:75px;">发表评论</el-button>-->

        </div>



    </div>
</template>

<script>
    export default {
        name: "chaosUserDiscussInput",
        data(){
            return{
                userHeadImgBase64:'',
                isInputAreaHover:false,
                isTextAreaHover:false,
                isTextAreaClick:false
            }
        },
        methods:{
            textAreaHover(){
                var self = this;
                if(self.isTextAreaHover&&!self.isTextAreaClick){
                    self.isTextAreaHover = false;
                    return;
                }

                if(!self.isTextAreaHover&&!self.isTextAreaClick){
                    self.isTextAreaHover = true;
                    return;
                }
            },

            inputAreaHover(){
                this.textAreaHover();
                var self = this;
                if(self.isInputAreaHover){
                    self.isInputAreaHover = false;
                    return;
                }

                if(!self.isInputAreaHover){
                    self.isInputAreaHover = true;
                    return;
                }

                // debugger;
            }
        },
        created(){
            var self = this;
            var storage=window.localStorage;
            var chaosTokenInfo = storage.getItem("chaosToken");

            if(chaosTokenInfo!=null){
                self.showLoginAndRegister = false;
                self.showUserInfo = true;
                self.searchHotPointWidth = 350;
                self.$api.get('userController/getUserHeadImg',null, result => {
                    self.userHeadImgBase64 = result;
                });

            }

        },

    }
</script>

<style scoped>
    .chaos-user-discuss-input{
        height:120px;
        width:100%;
        margin:10px 0 10px 0;
    }

    .pinglun-button-style{
        width: 70px;
        height: 75px;
        padding: 15px 15px;
        font-size: 14px;
        color: #fff;
        border-radius: 4px;
        text-align: center;
        min-width: 60px;
        vertical-align: top;
        cursor: pointer;
        /*background-color: #00a1d6;*/
        border: 1px solid #00a1d6;
        transition: .1s;
        user-select: none;
        outline: none;
        box-sizing: border-box;
        margin-left:8px;
    }

</style>
